<template>
  <view class="infos">
    <view class="content">
      <view class="section">
        <text>宝贝姓名</text>
        <input
          placeholder="请输入宝贝姓名"
          type="text"
          maxlength="15"
          :value="name"
          @input="onInputName"
        >
      </view>
      <view class="section">
        <text>手机号</text>
        <input
          placeholder="请输入宝贝手机号"
          type="text"
          maxlength="15"
          :value="phone"
          @input="onInputPhone"
        >
      </view>
      <view class="section">
        <text>所在学校</text>
        <view @tap="onSel('school')">{{ schoolId ? schoolName : "请选择宝贝所在学校" }}</view>
      </view>
      <view class="section">
        <text>所在年级</text>
        <view @tap="onSel('class')">{{ classId ? className : "请选择宝贝所在班级" }} </view>
      </view>
      <view class="footer">
        <button class="btn cancel" @tap="toCancel">取消</button>
        <button class="btn confirm" @tap="toConfirm">确定</button>
      </view>
    </view>
  </view>
  <picker-view class="picker-view" v-if="isShowSchool">
    <picker-view-column>
       <view
         v-for="(item, index) in schoolList"
         :key="index"
       >
         {{ item.name }}
      </view>
    </picker-view-column>
  </picker-view>
  <picker-view class="picker-view" v-if="isShowClass">
    <picker-view-column>
        <view
          v-for="(item, index) in classList"
          :key="index"
        >
          {{ item.name }}
        </view>
      </picker-view-column>
    </picker-view>
</template>

<script setup>
import { watch } from 'vue';
const emit = defineEmits(['cancel', 'confirm'])
const name = ref('')
const phone = ref('')
const isShowSchool = ref(false)
const isShowClassify = ref(false)
const schoolId = ref('')
const schoolName = ref('')
const classId = ref('')
const className = ref('')
const schoolList = ref([])
const classList = ref([])

onLoad(() => {

})

const getSchoolList = () => {
  http.request({
    url: '/xcx/schoolList',
    method: 'POST',
    data: {}
  }).then(({ data }) => {
    if(data?.key == 0) {
      uni.hideLoading()
      schoolList.value = data?.result ?? []
    }
  })
}

const getClassList = () => {
  http.request({
    url: '/base/class/list',
    method: 'POST',
    data: { school_id: schoolId.value }
  }).then(({ data }) => {
    if(res?.success){
      const data = res?.data
      classList.value = data
      classData.value = data?.map(m =>  m.name )
    }
  })
}
const onInputName = (e) => {
  name.value = e.datail.value
}

const onInputPhone = (e) => {
  phone.value = e.datail.value
}
const onSel = (type) => {
  if(type == "school") {
    isShowSchool.value = true
    getSchoolList()
  } else {
    isShowClassify.value = true
    getClassList()
  }
}

const toCancel = () => {
  emit('cancel')
}

const toConfirm = () => {
  emit('confirm')
}


</script>

<style scoped lang="scss">
.infos{
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0 , 0.2);
  .content{
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 30rpx;
    z-index: 999;
    width: 100%;
    height: 100vh;
    background: #fff;
    box-sizing: border-box;
  }
}
.section {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 28rpx;
  padding: 30rpx 0;
  line-height: 48rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #e5e5e5;
  text {
    width: 20%;
    color: #333;
  }
  input {
    width: 70%;
    padding: 0 20rpx;
    color: #333;
  }
  picker {
    width: 70%;
    padding: 0 30rpx;
  }
  .pca {
    width: 70%;
    padding: 0 20rpx;
  }
  .arrow {
    width: 28rpx;
    height: 28rpx;
    image {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }
}
.footer{
  // position: absolute;
  // left: 0;
  // right: 0;
  // bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  .btn{
    width:50%;
    height: 90rpx;
    line-height: 90rpx;
    color: #fff;
    border: 0;
    background: none;
    border-radius: 0;
    &.cancel{
      background: #ccc;
    }
    &.confirm{
      background: #eb2444;
    }
    &::after {
      border: 0 !important;
    }
  }
}
.picker-view{
  position: absolute;
  bottom: 0;
  z-index: 99999999;
  height: 600rpx;
  width: 100%;
}
</style>
